Using MVVM

Chart for WPF and Silverlight supports the MVVM (Model-View-ViewModel) design pattern. The entire chart can be declaratively written and bound to in XAML using native binding techniques.

The following steps demonstrate how to use C1Chart in an MVVM-designed application in WPF or Silverlight.

Create a new class named Sale, which implements the INotifyPropertyChanged interface.

C#	Copy Code
public class Sale : INotifyPropertyChanged { private string _product; private double _value; private double _discount; public Sale(string product, double value, double discount) { Product = product; Value = value; Discount = discount; } public string Product { get { return _product; } set { if (_product != value) { _product = value; OnPropertyChanged("Product"); } } } public double Value { get { return _value; } set { if (_value != value) { _value = value; OnPropertyChanged("Value"); } } } public double Discount { get { return _discount; } set { if (_discount != value) { _discount = value; OnPropertyChanged("Discount"); } } } public event PropertyChangedEventHandler PropertyChanged; void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } }

Copy Code

public class Sale : INotifyPropertyChanged
{
    private string _product;
    private double _value;
    private double _discount;
    public Sale(string product, double value, double discount)
    {
        Product = product;
        Value = value;
        Discount = discount;
    }
    public string Product
    {
        get { return _product; }
        set
        {
            if (_product != value)
            {
                _product = value;
                OnPropertyChanged("Product");
            }
        }
    }
    public double Value
    {
        get { return _value; }
        set
        {
            if (_value != value)
            {
                _value = value;
                OnPropertyChanged("Value");
            }
        }
    }
    public double Discount
    {
        get { return _discount; }
        set
        {
            if (_discount != value)
            {
                _discount = value;
                OnPropertyChanged("Discount");
            }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

Create a new class named SaleViewModel. This will act as the DataContext for the View which will contain C1Chart.

C#	Copy Code
public class SaleViewModel : INotifyPropertyChanged { private ObservableCollection<Sale> _sales = new ObservableCollection<Sale>(); public SaleViewModel() { //load data LoadData(); } public ObservableCollection<Sale> Sales { get { return _sales; } } public void LoadData() { //TODO: load data from your data source _sales.Add(new Sale("Bikes", 23812.89, 12479.44)); _sales.Add(new Sale("Shirts", 79752.21, 19856.86)); _sales.Add(new Sale("Helmets", 63792.05, 16402.94)); _sales.Add(new Sale("Pads", 30027.79, 10495.43)); } public event PropertyChangedEventHandler PropertyChanged; void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } }

Copy Code

public class SaleViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Sale> _sales = new ObservableCollection<Sale>();
 
    public SaleViewModel()
    {
        //load data
        LoadData();
    }
    public ObservableCollection<Sale> Sales
    {
        get { return _sales; }
    }
    public void LoadData()
    {
        //TODO: load data from your data source
        _sales.Add(new Sale("Bikes", 23812.89, 12479.44));
        _sales.Add(new Sale("Shirts", 79752.21, 19856.86));
        _sales.Add(new Sale("Helmets", 63792.05, 16402.94));
        _sales.Add(new Sale("Pads", 30027.79, 10495.43));
    }
    public event PropertyChangedEventHandler PropertyChanged;
    void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

This class includes an ObservableCollection, Sales, as well as a method to generate mock data upon initialization.

Switch to Source view and create a new WPF or Silverlight UserControl named SaleView.xaml. Add the following XAML above the LayoutRoot grid:

XAML	Copy Code
<UserControl.Resources> <local:SaleViewModel x:Key="viewModel" /> </UserControl.Resources> <UserControl.DataContext> <Binding Source="{StaticResource viewModel}"/> </UserControl.DataContext>

This XAML declares a SaleViewModel as a Resource and sets it to the DataContext of the UserControl. At runtime, the View will now be bound to the ViewModel. Controls within the View can now bind to public properties of the ViewModel.

Add a C1Chart control to the page.
Replace the default XAML for C1Chart with the following code:

XAML
Copy Code
<c1:C1Chart ChartType="Column" Name="c1Chart1" Palette="Module">
    <c1:C1Chart.Data>
        <c1:ChartData ItemsSource="{Binding Sales}" ItemNameBinding="{Binding Product}">
            <c1:DataSeries Label="Value" ValueBinding="{Binding Value}" />
            <c1:DataSeries Label="Discount" ValueBinding="{Binding Discount}" />
        </c1:ChartData>
    </c1:C1Chart.Data>
    <c1:C1ChartLegend />
</c1:C1Chart>
This XAML defines a C1Chart with two data series. The ChartData’s ItemsSource is set to the collection of Sales objects exposed by our ViewModel. Each DataSeries has its ValueBinding property set and we also set the ItemNameBinding to display our product names along the X-axis.

Note: If you are using XYDataSeries, then you should specify the XValueBinding for each series and you should not set the ItemNameBinding.

XAML	Copy Code
<c1:C1Chart ChartType="Column" Name="c1Chart1" Palette="Module"> <c1:C1Chart.Data> <c1:ChartData ItemsSource="{Binding Sales}" ItemNameBinding="{Binding Product}"> <c1:DataSeries Label="Value" ValueBinding="{Binding Value}" /> <c1:DataSeries Label="Discount" ValueBinding="{Binding Discount}" /> </c1:ChartData> </c1:C1Chart.Data> <c1:C1ChartLegend /> </c1:C1Chart>

Open the App.xaml.cs application configuration file and in the Application_Startup event, replace the following code:

Example Title
Copy Code
private void Application_Startup(object sender, StartupEventArgs e)
{
    this.RootVisual = new Views.SaleView();
}
This code sets the RootVisual to show your SaleView upon startup.

Example Title	Copy Code
private void Application_Startup(object sender, StartupEventArgs e) { this.RootVisual = new Views.SaleView(); }

Run your application and observe that the C1Chart appears to be bound to the Sales data from the ViewModel.